<template>
  <div class="yingmoo-enroll">
    <div class="header">
      <div class="header-main">
         <router-link :class="{'router-link-exact-active': $route.name=='ymIndex'}" to="/"><img src="../assets/ym-register/register-logo.png" /></router-link>
         <p>忘记密码</p>
      </div> 
    </div>
    <div class="main">
     <div class="across">
        <div class="password">
          <img src="../assets/ym-register/enroll-phone.png" class="enroll-phone" />
          <input type="text" v-model="mobile" placeholder="请输入手机号" @blur="checkMobile"/>
        </div>
       <p v-if="flag_1"><img src="../assets/ym-register/warn.png" />{{warning.m_mobile}}</p>
     </div>
     <div class="across">
        <div class="verification">
          <input type="text" v-model="picCode" placeholder="验证码" @blur="checkPicCode" @keyup="checkPicCode"/>
        </div>
        <div class="verification-code">
          <img width="90px" height="35px" :src="validateCodeUrl" />
          <img src="../assets/ym-register/refresh.png" class="refresh" @click="refreshPicture"/>
        </div>
       <p v-if="flag_2"><img src="../assets/ym-register/warn.png" />{{warning.m_picCode}}</p>
     </div>
     <div class="across">
        <div class="phone-verification">
          <img src="../assets/ym-register/password-img.png" />
          <input type="text" v-model="mobileCode" placeholder="手机验证码" @blur="checkMobileCode"/>
          <button id="mobileCode_button" class="click-to" disabled="disabled" @click="getSMCode">获取验证码</button>
        </div>
       <p v-if="flag_3"><img src="../assets/ym-register/warn.png" />{{warning.m_mobileCode}}</p>
     </div>
     <div class="across">
        <div class="password">
          <img src="../assets/ym-register/password-img.png" />
          <input type="password" v-model="password" placeholder="设置新密码" @blur="checkPassword"/>
        </div>
       <p v-if="flag_4"><img src="../assets/ym-register/warn.png" />{{warning.m_password}}</p>
     </div>
     <div class="across">
        <div class="password">
          <img src="../assets/ym-register/password-img.png" />
          <input type="password" v-model="repassword" placeholder="请确认密码" @blur="checkrePassword"/>
        </div>
       <p v-if="flag_5"><img src="../assets/ym-register/warn.png" />{{warning.m_rePassword}}</p>
     </div>
     
     <div class="btn-submit" @click="commit">提交</div>
    </div>
    <div class="footer-copyright">
      <div class="w1200">
        <div class="copyright">
          <p>
            <span>Copyright @ 2012-2017</span>
            <span>北京鹰目网络科技有限公司</span>
            <span>京ICP备14044439号-1</span>
            <img src="../assets/ym-footer/icon-g.png" />
            <span>京公网安备 11010802020633号</span>
          </p>
          <p>
            <span>地址：北京市海淀区上地东路35号颐泉汇大厦D座5层</span>
            <span>热线：400 650 7893</span>
            <span>传真：010-62681689/8248335</span>
          </p>
        </div>
        <div class="safety clearfix">
            <a href="javascript:;"><img src="../assets/ym-footer/safe-360.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-kexin.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-aqlm.png" /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
	  name:'ymPassword' ,
	  data(){
	   	return{
	   		requestAddr:this.GLOBAL.addr,
	   		validateCodeUrl:this.GLOBAL.addr+"/Login/getValidateCode?type=1",
	   		mobile:null,
	   		picCode:null,
	   		mobileCode:null,
	   		password:null,
	   		repassword:null,
	   		flag_1:false,
	   		flag_2:false,
	   		flag_3:false,
	   		flag_4:false,
	   		flag_5:false,
	   		warning:{
	   			m_mobile:null,
	   			m_mobileCode:null,
	   			m_password:null,
	   			m_rePassword:null,
	   			m_picCode:null
	   		}
	   	}
	  },
	  mounted(){
	  	this.refreshPicture()
	  },
	  methods:{
	  	commit(){
	  		if(!this.checkForm())
	  			this.$message({
	  			message:"请确认输入信息是否完善！",
	  			type:"warning"
	  		});
	  		this.$http.post(this.requestAddr+"/Login/changePassword",{"mobile":this.mobile,"password":this.password},{emulateJSON:true}).then(
	  			(res)=>{
	  				if(res.data.code==0){
	  					this.$confirm('密码已修改成功，是否现在登录？', '成功提示', {
						      confirmButtonText: '确定',
						      cancelButtonText: '取消',
						      type: 'success' 
					    }).then((res)=>{
					    		window.location.href='../#/ymRegister'
					    }).catch(() => {
			            window.location.href='../#/'
			        });
	  				}
	  			}
	  		)
	  	},
	  	refreshPicture(){
	  		this.validateCodeUrl = this.requestAddr+"/Login/getValidateCode?type=1&date=" + new Date();
	  	},
	  	checkForm(){
	  		this.checkMobile();
	  		/*this.checkPicCode();*/
	  		this.checkMobileCode();
	  		this.checkPassword();
	  		this.checkrePassword();
	  		
	  		if(this.flag_1||this.flag_2||this.flag_3||this.flag_4||this.flag_5){
	  			return false
	  		}else{
	  			return true
	  		}
	  	},
	  	getSMCode(){
	  		this.checkMobile();
	  		this.checkPicCode();
	  		var btn = document.getElementById("mobileCode_button")
	  		if(this.flag_1 || this.flag_2){
	  			this.flag_3 = true
	  			this.warning.m_mobileCode="请先输入正确的手机号"
	  			return
	  		}else{
	  			this.flag_3 = false
	  		}
	  		this.$http.post(this.requestAddr+"/Login/getShortMessageCode",{
            "mobile": this.mobile,
            "picCode": this.picCode,
            "type": '1'
          }, {
            emulateJSON: true,
            withCredentials: true
          }).then(
          	(res)=>{
          		console.log(res.data)
          		if(res.data.code == 0){
          			this.$message({
				          message: '验证码已发送成功，请注意查收',
				          type: 'success'
				        });
          			this.refreshPicture()
          			btn.disabled=true
          			btn.style.background="#999999"
          		}
          	}
          )
	  	},
	  	checkMobile(){
	  		var regex = /^1[3|4|5|7|8][0-9]\d{8}$/;
	  		if(this.isEmpty(this.mobile)){
	  			this.warning.m_mobile="手机号码不能为空"
	  			this.flag_1=true
	  			return
	  		}else if(regex.test(this.mobile)){
	  			this.mobileIsExist(this.mobile)
	  		}else{
	  			this.flag_1=true
	  			this.warning.m_mobile="请输入有效的手机号"
	  		}
	  	},
	  	checkPicCode(){
	  		var btn = document.getElementById("mobileCode_button")
	  		if(this.isEmpty(this.picCode)){
	  			this.warning.m_picCode="请输入图中的验证码"
	  			this.flag_2 = true
	  			return
	  		}else if(this.picCode.length==4){
	  			this.$http.post(this.requestAddr + "/Login/confirmPicCode",{"picCode": this.picCode},{emulateJSON:true,withCredentials: true}).then(
	  				(res)=>{
	            if (res.data.result == 'ok') {
	              this.flag_2 = false;
	              btn.style.background = '#42AEF3'
	              btn.removeAttribute('disabled')
	            } else {
	              this.flag_2 = true;
	              this.warning.m_picCode = "验证码输入错误！"
	            }
	  				}
	  			)
	  		}else{
	  			btn.style.background = '#999999'
	        btn.disabled = true
	  		}
	  	},
	  	checkMobileCode(){
	  		if(this.isEmpty(this.mobileCode)){
	  			this.warning.m_mobileCode = "短信验证码不能为空"
	  			this.flag_3 = true
	  		}else if(this.mobileCode.length == 6){
	  			this.$http.post(this.requestAddr+"/Login/checkSMCValue",{"mobileCode":this.mobileCode},{emulateJSON:true,withCredentials:true}).then(
	  				(res)=>{
	  					if(res.data.code != 0){
	  						this.flag_3 = true
	  						this.warning.m_mobileCode = '验证码校验失败！'
	  					}else{
	  						this.flag_3 = false	  						
	  					}
	  				}
	  			)
	  		}else{
	  			this.flag_3 = true
	  			this.warning.m_mobileCode = '验证码输入不正确2'
	  		}
	  	},
	  	checkPassword(){
	  		if(this.isEmpty(this.password)){
	  			this.warning.m_password = "密码不能为空"
	  			this.flag_4 = true
	  		}else{
	  			this.flag_4 = false
	  		}
	  	},
	  	checkrePassword(){
	  		if(this.isEmpty(this.repassword)){
	  			this.warning.m_rePassword = "确认密码不能为空"
	  			this.flag_5 = true
	  		}else if(this.repassword == this.password){
	  			this.flag_5 = false
	  		}else{
	  			this.flag_5 = true
	  			this.warning.m_rePassword = "两次输入密码不一致"
	  		}
	  	},
	  	/*校验手机号是否存在*/
      mobileIsExist(mobile) {
        this.$http.post(this.requestAddr + "/Login/mobileIsExist", {
          "mobile": mobile
        }, {
          emulateJSON: true
        }).then(
          (res) => {
            var d = res.data;
            if (d.code == 0 && d.result == 'yes') {
              this.flag_1 = false;
            } else {
              this.flag_1 = true;
              this.warning.m_mobile = "请输入您注册时使用的手机号！";
            }
          }
        )
      },
	  	isEmpty(param){/*判断是否为空*/
        if (param != null && param.trim() != '') {
          return false;
        } else {
          return true;
        }
	  	}
	  }
  }

</script>

<style scoped lang="less">
  .yingmoo-enroll {
    width: 100%;
    .header {
      width: 100%;
      height: 62px;
      background-color: #036eb7;
      .header-main {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        p {
          color: #81a6de;
          line-height: 62px;
          font-size: 14px;
        }
        img {
          width: 187px;
          height: 50px;
          margin-top: 5px;
        }
      }
    }
    .main {
      width: 1200px;
      height: 707px;
      margin: 0 auto;
      padding-top: 72px;
      .across {
        height: 40px;
        display: flex;
        margin-top: 25px;
        .register {
          width: 280px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 400px;
          img {
            position: relative;
            top: 5px;
            left: 5px;
          }
          input {
            border: none;
            width: 235px;
            height: 33px;
            font-size: 14px;
            padding-left: 13px;
            margin-left: 5px;
            outline: none;
          }
        }
        .password {
          width: 280px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 400px;
          img {
            position: relative;
            top: 5px;
            left: 5px;
          }
          .enroll-phone {
            left: 9px;
          }
          input {
            border: none;
            width: 235px;
            height: 33px;
            font-size: 14px;
            padding-left: 13px;
            margin-left: 5px;
            outline: none;
          }
        }
        .verification {
          width: 150px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 400px;
          input {
            width: 135px;
            height: 33px;
            outline: none;
            border: none;
            padding-left: 13px;
            font-size: 14px;
          }
        }
        .verification-code {
          width: 123px;
          height: 40px;
          margin-left: 8px;
          .refresh {
            margin-bottom: 10px;
            margin-left: 5px
          }
        }
        .phone-verification {
          width: 280px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 400px;
          display: flex;
          img {
            height: 21px;
            position: relative;
            top: 5px;
            left: 5px;
          }
          input {
            border: none;
            width: 160px;
            height: 33px;
            font-size: 14px;
            padding-left: 13px;
            margin-left: 5px;
            outline: none;
          }
          .click-to {
            width: 100px;
            height: 36px;
            background-color: #999999;
            border: none;
            color: white;
            border-radius: 2px;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            cursor: pointer;
          }
        }
        p {
          height: 36px;
          color: #f29600;
          font-size: 12px;
          margin-left: 20px;
          line-height: 42px;
          img {
            margin-right: 10px;
          }
        }
      }
      .btn-submit {
        width: 280px;
        height: 40px;
        background-color: #036eb7;
        color: white;
        font-size: 15px;
        line-height: 40px;
        border-radius: 3px;
        margin-top: 20px;
        text-align: center;
        margin-left: 400px;
        cursor: pointer;
      }
    }
    .footer-copyright {
      width: 100%;
      height: 108px;
      background: #1a1a1a;
      .w1200 {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .copyright {
        color: #fff;
        font-size: 14px;
        line-height: 30px;
        p {
          display: flex;
          align-items: center;
        }
        span {
          margin-right: 10px;
        }
        img {
          margin-right: 3px;
        }
      }
      .safety a {
        float: left;
        margin-left: 12px;
        img {
          display: block;
        }
      }
    }
  }

</style>
